<template>
  <div class="lg:gap-10 flex flex-col gap-5 mx-auto max-w-7xl">
    <div class="max-lg:px-4 flex justify-between items-center py-4">
      <el-breadcrumb separator-class="el-icon-arrow-right" class="flex items-center">
        <el-breadcrumb-item class="flex items-center" :to="{ path: localePath('/') }">
          <div class="flex items-center">
            <i class="el-icon-s-home mr-1 text-lg"></i>
          </div>
        </el-breadcrumb-item>
        <el-breadcrumb-item class="flex items-center whitespace-nowrap" :to="{ path: localePath('/cards') }">
          {{ $t('pages.pointcardlist') }}
        </el-breadcrumb-item>
        <el-breadcrumb-item class="">
          <p class="capitalize">
            {{ categoryRes.name }}
          </p>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="lg:px-0 grid grid-cols-4 gap-12 px-4">
      <div class="lg:col-span-4 flex flex-col col-span-4 gap-4">
        <!-- 全部游戏 -->
        <!-- 全部游戏 -->
        <!-- 全部游戏 -->
        <h1 class="font-medium text-[1.25rem] text-[#121212]">
          {{ categoryRes.name }}
        </h1>
        <div class="simditor">
          <div class="simditor-body">
            <div v-if="categoryRes.top_content" v-html="categoryRes.top_content"></div>
          </div>
        </div>
        <div class="lg:grid-cols-7 md:grid-cols-4 sm:grid-cols-3 grid grid-cols-2 gap-4 lg:gap-x-[4.65rem]">
          <nuxt-link v-for="item in goodsList" :key="item.id" :to="cardRecharge(item)" class="group flex flex-col gap-1 cursor-pointer">
            <div class="rounded-[0.75rem] w-full aspect-[8/11] bgg p-1">
              <div class="rounded-[0.75rem] size-full overflow-hidden border relative">
                <img
                  v-lazy="$globalFn.imgPrefixUrl(item.image || '', 'goods_thumb_3_4')"
                  :title="`${item.goods_name}`"
                  :alt="`${item.goods_name}`"
                  loading="lazy"
                  class="size-full group-hover:scale-110 object-cover bg-gray-200 duration-300"
                />
                <img src="~/assets/img/bg-white.png" class="absolute top-2 inset-1/3 z-10 w-1/3 h-auto" alt="" />
              </div>
            </div>
            <span class="font-medium text-[0.75rem] text-[#121212] line-clamp-1">
              {{ item?.goods_name || '' }}
            </span>
            <p class="font-normal text-[0.75rem] text-[#666666]">
              {{ item?.region?.name || '' }}
            </p>
            <!-- <p class="font-normal text-[0.75rem] text-[#666666]">
                {{ $t("formItem.sale")
                }}{{
                  item.sales_actual >= 10000
                    ? (item.sales_actual / 10000).toFixed(2) + "w"
                    : item.sales_actual
                }}
              </p> -->
          </nuxt-link>
        </div>
        <Paging :total="total" :page.sync="page" :limit.sync="size" @change="handlePageChange" :current-query="$route.query"> </Paging>

        <div class="simditor">
          <div class="simditor-body">
            <div v-if="categoryRes.bottom_content" v-html="categoryRes.bottom_content"></div>
          </div>
        </div>
        <div class=""></div>
        <div class=""></div>
      </div>
    </div>
    <no-data v-if="goodsList.length == 0" :loading="loading"></no-data>
  </div>
</template>
<script>
  export default {
    layout: 'newsHome',
    data() {
      return {
        goodsList: [], // 商品列表数据集合
        page: 1, // 当前页码，默认第1页
        size: 21, // 每页显示数量，默认10条
        loading: true, // 页面加载状态标识
        total: 0, // 商品数据总条数
        name: '', // 一级分类名称(来自URL参数code)
        names: '', // 二级分类名称(来自URL参数amount)
        categoryRes: {} // 分类信息
      }
    },
    head() {
      return {
        title: this.categoryRes.seo_title,
        classify: {},
        meta: [
          {
            hid: 'description',
            name: 'description',
            content: this.categoryRes.seo_description
          }
        ]
      }
    },
    ///api/goods_category/read?code=1
    async asyncData({ $axios, params, query }) {
      try {
        // 新增分类信息请求
        const [categoryRes, goodsRes] = await Promise.all([
          $axios.get('/api/goods_category/read', {
            params: { code: params.code }
          }),
          $axios.get('/api/goods/index', {
            params: {
              page: query.page || 1,
              limit: 21,
              cate_code: params.code,
              paginate: 1
            }
          })
        ])
        return {
          categoryRes: categoryRes || [],
          goodsList: goodsRes.data || [],
          total: goodsRes.total || 0,
          loading: false,
          name: params.code,
          names: params.code,
          page: query.page || 1
        }
      } catch {
        return {
          goodsList: [],
          total: 0,
          loading: false
        }
      }
    },
    created() {},
    methods: {
      // 生成商品链接
      cardRecharge(item) {
        if (!item?.code) return '#'
        return this.localePath(`/product/${item.code}`)
      },
      // 处理分页变化
      async handlePageChange({ page, currentQuery }) {
        const newQuery = { ...this.$route.query, page: page }
        const newPath = this.$route.path + '?' + new URLSearchParams(newQuery).toString()
        window.history.replaceState({}, '', newPath)
        try {
          this.page = currentQuery || page
          this.loading = true
          const { data } = await this.$axios.get('/api/goods/index', {
            params: {
              page: currentQuery || page,
              limit: this.size,
              cate_code: this.names,
              paginate: 1
            }
          })
          this.goodsList = data || []
        } catch (err) {
          this.$message.error('数据加载失败')
        } finally {
          this.loading = false
        }
      }
    }
  }
</script>
<style lang="less" scoped>
  .bgg {
    background: linear-gradient(180deg, #fff 50%, #e6e6e6 100%);
    border-radius: 0.75rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>
